<%--
  Created by IntelliJ IDEA.
  User: 于永祥
  Date: 2022/9/20
  Time: 14:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>

    <title>万码招聘 - 注册</title>
</head>
<body>

<div class="pxp-preloader"><span>Loading...</span></div>

<!--Head-->
<jsp:include page="/web/personal/inc/personalSignUpHead"/>

<!--js代码-->

<script type="text/javascript">
    $(function (){
        //注册
        $("#myform").submit(verifySignUp);

        //验证手机号格式是否符合规范
        $("#phone").blur(verifyPhone);
        //验证密码格式是否符合规范
        $("#password").blur(verifyPassword);
        //验证两次密码是否一致
        $("#confirmPassword").blur(verifyPasswordTwice);
        //显示、隐藏密码
        $(".hide-show").click(showPassword);
        $(".hide-shows").click(showConfirmPassword);
        //点击更新验证码
        $(".updateVerifyCode").click(updateVerifyCode);
        //验证验证码
        $("#verifyCode").blur(verificationCode);
    });

    //验证
    function verifySignUp(){
        return verifyPhone()&&verifyPassword()&&verifyPasswordTwice()&&verificationCode();
    }

    //验证手机号格式是否符合规范，以及手机号是否已被注册
    function verifyPhone(){
        //验证手机号格式，十一位，第一位是1，第二位是3-9任意数字，其余任意九个数字
        var phone = $("#phone").val();
        var reg = /^1[3-9][0-9]{9}$/;
        if(phone==""){
            $(".phoneTips").html(("请填写手机号!"));
            $(".phoneTips").css("color","red");
            return false;
        }
        if(!reg.test(phone)){
            $(".phoneTips").html("请确认手机号是否有误!");
            $(".phoneTips").css("color","red");
            return false;
        }
        else {
            var Mes;
            $.ajax({
                url:"/web/signUpVerify",
                type:"post",
                data:{
                    phone:phone
                },
                async:false,
                success:function (mes){
                    Mes = mes;
                }
            });
            if(Mes=="true"){
                $(".phoneTips").html("该手机号已被注册!");
                $(".phoneTips").css("color","red");
                return false;
            }
            else {
                $(".phoneTips").html("√");
                $(".phoneTips").css("color","blue");
                return true;
            }
        }
    }

    //验证密码格式是否符合规范
    function verifyPassword(){
        var password = $("#password").val();
        var confirmPassword = $("#confirmPassword").val();
        var reg = /^[a-zA-Z0-9_-]{5,11}$/;
        if(password==""){
            $(".passwordTips").html("密码不能为空!");
            $(".passwordTips").css("color","red");
            return false;
        }
        if(!reg.test(password)){
            $(".passwordTips").html("密码格式有误!");
            $(".passwordTips").css("color","red");
            return false;
        }
        else {
            if(password==confirmPassword){
                $(".confirmPasswordTips").html("√");
                $(".confirmPasswordTips").css("color","blue");
            }
            $(".passwordTips").html("√");
            $(".passwordTips").css("color","blue");
            return true;
        }
    }

    //验证两次密码是否一致
    function verifyPasswordTwice(){
        var password = $("#password").val();
        var confirmPassword = $("#confirmPassword").val();
        if(confirmPassword==""){
            $(".confirmPasswordTips").html("请确认密码!");
            $(".confirmPasswordTips").css("color","red");
            return false;
        }
        if(confirmPassword!=password){
            $(".confirmPasswordTips").html("两次密码不一致!");
            $(".confirmPasswordTips").css("color","red");
            return false;
        }
        else {
            $(".confirmPasswordTips").html("√");
            $(".confirmPasswordTips").css("color","blue");
            return true;
        }
    }

    //显示、隐藏密码
    function showPassword(){
        var type = $("#password").attr("type");
        if(type=="password"){
            $("#password").prop("type","text");
        }
        else {
            $("#password").prop("type","password");
        }
    }

    //显示、隐藏确认密码
    function showConfirmPassword(){
        var type = $("#confirmPassword").attr("type");
        if(type=="password"){
            $("#confirmPassword").prop("type","text");
        }
        else {
            $("#confirmPassword").prop("type","password");
        }
    }

    //点击更新验证码
    function updateVerifyCode(){
        $(".updateVerifyCode").attr("src","${path}/web/verifyCode?sj="+Math.random());
    }

    //验证验证码
    function verificationCode(){
        var verifyCode = $("#verifyCode").val();
        if(verifyCode==""){
            $(".verifyCodeTips").html("请输入验证码!");
            $(".verifyCodeTips").css("color","red");
            return false;
        }
        else {
            var Mes;
            $.ajax({
                url:"/web/verifyVerifyCode",
                type: "post",
                data:{
                    verifyCode:verifyCode
                },
                async: false,
                success:function (mes){
                    Mes = mes;
                }
            });
            if(Mes=="true"){
                $(".verifyCodeTips").html("√");
                $(".verifyCodeTips").css("color","blue");
                return true;
            }
            else {
                $(".verifyCodeTips").html("验证码有误!");
                $(".verifyCodeTips").css("color","red");
                return false;
            }
        }
    }
</script>

<section class="pxp-hero vh-100" style="background-color: var(--pxpMainColorLight);">
    <div class="row align-items-center pxp-sign-hero-container">
        <div class="col-xl-6 pxp-column">
            <div class="pxp-sign-hero-fig text-center pb-100 pt-100">
                <img src="/static/web/images/signup-big-fig.png" alt="Sign up">
                <h1 class="mt-4 mt-lg-5">创建账号</h1>
            </div>
        </div>
        <div class="col-xl-6 pxp-column pxp-is-light">
            <div class="pxp-sign-hero-form pb-100 pt-100">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-xl-7 col-xxl-5">
                        <div class="pxp-sign-hero-form-content">
                            <h5 class="text-center">注册</h5>
                            <form id="myform" method="post" action="/web/signUpUser" class="mt-4">

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="phoneTips"></span>
                                    <div class="form-floating mb-3">
                                        <input name="phone" type="text" class="form-control" id="phone" placeholder="phone">
                                        <label for="phone" style="font-weight: bold;">手机号</label>
                                        <span class="fa fa-envelope-o"></span>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="passwordTips"></span>
                                    <div class="form-floating mb-3">
                                        <input name="pass" type="password" class="form-control" id="password" placeholder="password">
                                        <label for="password" style="font-weight: bold;">密码</label>
                                        <span class="fa fa-lock hide-show"></span>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="confirmPasswordTips"></span>
                                    <div class="form-floating mb-3">
                                        <input name="confirmPassword" type="password" class="form-control" id="confirmPassword" placeholder="confirmPassword">
                                        <label for="confirmPassword" style="font-weight: bold;">确认密码</label>
                                        <span class="fa fa-lock hide-shows"></span>
                                    </div>
                                </div>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="verifyCodeTips"></span>
                                    <div class="form-floating mb-3">
                                        <input name="verifyCode" type="text" class="form-control" id="verifyCode" placeholder="verifyCode">
                                        <label for="verifyCode" style="font-weight: bold;">验证码</label>
                                        <span class="fa fa-envelope-o"></span>
                                    </div>
                                    <!-- 生成验证码 & 更新验证码 -->
                                    <div style="margin-left: 109px;margin-bottom: 15px;" class="form-group">
                                        <img class="updateVerifyCode" src="${path}/web/verifyCode" style="border-radius: 30px;">
                                        <a class="updateVerifyCode" href="javascript:void(0)" style="font-size: 15px;color: #0a53be;font-weight:bold;">换一张</a>
                                    </div>
                                </div>

                                <input style="width: 285px;" type="submit" value="下一步" class="btn rounded-pill pxp-sign-hero-form-cta">
                                <div class="mt-4 text-center pxp-sign-hero-form-small" style="font-weight: bold;">
                                    已经有一个账号？<a href="/web/personal/signIn">登录</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<%--<!--foot-->--%>
<%--<jsp:include page="/web/personal/inc/personalSignUpFoot"/>--%>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>
</body>
</html>